<script setup lang="ts">
import { ref,defineEmits,onUnmounted } from "vue"
const emit = defineEmits(['changeHeaderCSS']);
const changeHeaderCSS = (flag:boolean)=>{
  emit('changeHeaderCSS',flag);
}
const underHeader = ref();
// 监听元素是否在可视区域内组件
import { useIntersectionObserver } from '@vueuse/core'
//调用这个函数useIntersectionObserver，里面传三个参数
// 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）
// 2. target 是观察的目标容器 dom对象 | 组件对象
// 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出\
const { } = useIntersectionObserver(
  underHeader,// target 是vue的对象引用。是观察的目标
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }]: any) => {
    if (isIntersecting) {
      // 子组件监听进入可视区域调用父组件方法
      //进入可视区域
      changeHeaderCSS(false)
      if (browerWidth < 1200) {
        changeHeaderCSS(true)
      }
    } else {
      changeHeaderCSS(true);
    }
  },
  // threshold 表示观察的目标进入视口的比例，取值范围是从 0 到 1
  // 默认是0.1。 值越大表示观察越不灵敏
  { threshold: 0.1 }
)
const mgutter = ref(0);
// 等比缩放
//获取整个界面的宽
let browerWidth = window.innerWidth;
//整个界面的宽*0.36 = 高
let bannerHeight = ref(browerWidth * 0.4)
// 浏览器加载时，判断宽度是否大于1200,从而判断头部右侧显示菜单还是图标
const listenerReSize = ()=>{
  browerWidth = window.innerWidth;
  // 如果宽度小于1200,头部菜单变为图标
  if (browerWidth < 1200) {
    //头部菜单变为图标
    changeHeaderCSS(true)
    mgutter.value = 0;
  } else {
    // 头部图标变为菜单
    changeHeaderCSS(false)
    mgutter.value = 100;
  }
  console.log(mgutter.value);
  bannerHeight.value = browerWidth * 0.36;
}
window.addEventListener('resize', listenerReSize);
//vue3 使用生命周期销毁钩子
onUnmounted(()=>{
  window.removeEventListener('resize', listenerReSize)
})
</script>

<template>
  <div class="service">
    <div ref="underHeader"></div>
    <div class="s-header">
      <el-row class="s-header-content">
        <el-col :span="6" :xs="24" :sm="24" :md="6" class="font-center" style="margin-bottom: 40px;">
          <span class="ft30 fw3">SERVICE CONTENT</span>
        </el-col>
        <el-col :span="18" :xs="24" :sm="24" :md="18">
          <div class="s-right">
            <p class="ft30 title-1">
              比专业更专注
            </p>
            <p class="title-2">
              PROFESSIONAL &<br>
              DEDICATED
            </p>
            <p style="line-height:28px">
              抖酷(douku)独立设计工作室。成立于2024年，立足于文化之都中国北京，是一家拥有国际化视野的专业独立设计工作室。抖酷一直致力于品牌战略策划、品牌视觉设计、品牌空间设计等服务。所服务的客户遍及全国各地，拥有丰富品牌经验。
            </p>
            <p style="line-height:28px">
              我们洞察时代轨迹，以开创性的品牌理念与塑造方法，前沿的商业设计思维，造时代先锋品牌。
            </p>
            <p class="fw6 ft14">
              DOUKU IS AN INDEPENDENT DESIGN STUDIO. FOUNDED IN 2024 AND BASED IN BEIJING, CHINA, THE CULTURAL CAPITAL, IT IS A PROFESSIONAL INDEPENDENT DESIGN STUDIO WITH AN INTERNATIONAL VISION. DOUKU HAS BEEN COMMITTED TO BRAND STRATEGY PLANNING, BRAND VISUAL DESIGN, BRAND SPACE DESIGN AND OTHER SERVICES. THE CUSTOMERS SERVED ARE ALL OVER THE COUNTRY AND HAVE RICH BRAND EXPERIENCE.
            </p>
            <p class="fw6 ft14">
              WE HAVE INSIGHT INTO THE TRAJECTORY OF THE TIMES, AND CREATE A PIONEER BRAND OF THE TIMES WITH PIONEERING BRAND CONCEPTS AND SHAPING METHODS, AS WELL AS CUTTING-EDGE BUSINESS DESIGN THINKING.
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bg1 h700" :style="{height: bannerHeight + 'px'}">
    </div>
    <div class="s-header">
      <el-row class="s-header-content">
        <el-col :span="6" :xs="24" :sm="24" :md="6"></el-col>
        <el-col :span="18" :xs="24" :sm="24" :md="18">
          <div class="s-right">
            <p class="ft30 title-1">
              品牌、设计、营销<br>三大领域四大类项目
            </p>
            <p class="title-2">
              BRAND & VISUAL & <br>
              COMMUNICATION
            </p>
            <p style="line-height:28px">
              抖酷(douku)独立设计工作室。成立于2024年，立足于文化之都中国北京，是一家拥有国际化视野的专业独立设计工作室。抖酷一直致力于品牌战略策划、品牌视觉设计、品牌空间设计等服务。所服务的客户遍及全国各地，拥有丰富品牌经验。
            </p>
            <p style="line-height:28px">
              我们洞察时代轨迹，以开创性的品牌理念与塑造方法，前沿的商业设计思维，造时代先锋品牌。
            </p>
            <p class="fw6 ft14">
              DOUKU IS AN INDEPENDENT DESIGN STUDIO. FOUNDED IN 2024 AND BASED IN BEIJING, CHINA, THE CULTURAL CAPITAL, IT IS A PROFESSIONAL INDEPENDENT DESIGN STUDIO WITH AN INTERNATIONAL VISION. DOUKU HAS BEEN COMMITTED TO BRAND STRATEGY PLANNING, BRAND VISUAL DESIGN, BRAND SPACE DESIGN AND OTHER SERVICES. THE CUSTOMERS SERVED ARE ALL OVER THE COUNTRY AND HAVE RICH BRAND EXPERIENCE.
            </p>  
            <p class="fw6 ft14">
              WE HAVE INSIGHT INTO THE TRAJECTORY OF THE TIMES, AND CREATE A PIONEER BRAND OF THE TIMES WITH PIONEERING BRAND CONCEPTS AND SHAPING METHODS, AS WELL AS CUTTING-EDGE BUSINESS DESIGN THINKING.
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bg2 h700" :style="{height: bannerHeight + 'px'}">
    </div>
    <div class="service2">
      <el-row :gutter="mgutter" >
        <el-col :span="12" :xs="24" :sm="24" :md="24" :lg="12" class="not-padding" style="margin-bottom: 40px;">
          <p class="ft36 fw6 mb10">品牌全案设计</p>
          <div class="line under-brand mb10"></div>
          <p class="ft18 mb10">Brand Case Planning</p>
          <p class="mtb">
            <el-text class="line-height-24">
              品牌全案设计以3C模型为主导，调查分析品类市场、竞争情况<br>
              匹配关键目标消费人群，找准品牌自身优势<br>
              制定差异化品牌策略，为品牌量身打造CI系统<br>
              从0到1打造品牌认知，解决老品牌停滞难题，并通过品牌形象设计<br>
              从IP、VI、空间延展等视觉接触点入手<br>
              建立规范化、系统化、传播性强的品牌视觉形象
            </el-text>
          </p>
          <div class="line mtb "></div>
          <div class="img wh1b06 bg4">
            
          </div>
        </el-col>
        <el-col :span="12" :xs="24" :sm="24" :md="24" :lg="12" class="not-padding" style="margin-bottom: 40px;">
          <p class="ft36 fw6 mb10">品牌VI设计</p>
          <div class="line under-brand mb10"></div>
          <p class="ft18 mb10">Brand VI design</p>
          <p class="mtb">
            <el-text class="line-height-24">
              VI即是视觉识别系统，人们所感知的外部信息<br>
              有83%是通过视觉通道到达人们心智的<br>
              视觉是人们接受外部信息的最重要和最主要的通道<br>
              VI设计就是将非可视内容转化为静态的视觉识别符号<br>
              简单来说就是将品牌信息用图案、符号表达出来
            </el-text>
          </p>
          <div class="line mtb "></div>
          <div class="img wh1b06 bg5">
            
          </div>
        </el-col>
      </el-row>
      <div class="mb100"></div>
      <el-row :gutter="mgutter" >
        <el-col :span="12" :xs="24" :sm="24" :md="24" :lg="12" class="not-padding" style="margin-bottom: 40px;">
          <p class="ft36 fw6 mb10">UI/UX设计</p>
          <div class="line under-brand mb10"></div>
          <p class="ft18 mb10">Brand Case Planning</p>
          <p class="mtb">
            <el-text class="line-height-24">
              品牌全案设计以3C模型为主导，调查分析品类市场、竞争情况<br>
              匹配关键目标消费人群，找准品牌自身优势<br>
              制定差异化品牌策略，为品牌量身打造CI系统<br>
              从0到1打造品牌认知，解决老品牌停滞难题，并通过品牌形象设计<br>
              从IP、VI、空间延展等视觉接触点入手<br>
              建立规范化、系统化、传播性强的品牌视觉形象
            </el-text>
          </p>
          <div class="line mtb "></div>
          <div class="img wh1b06 bg6">
            
          </div>
        </el-col>
        <el-col :span="12" :xs="24" :sm="24" :md="24" :lg="12" class="not-padding" style="margin-bottom: 40px;">
          <p class="ft36 fw6 mb10">创意营销设计</p>
          <div class="line under-brand mb10"></div>
          <p class="ft18 mb10">Brand VI Planning</p>
          <p class="mtb">
            <el-text class="line-height-24">
              VI即是视觉识别系统，人们所感知的外部信息<br>
              有83%是通过视觉通道到达人们心智的<br>
              视觉是人们接受外部信息的最重要和最主要的通道<br>
              VI设计就是将非可视内容转化为静态的视觉识别符号<br>
              简单来说就是将品牌信息用图案、符号表达出来
            </el-text>
          </p>
          <div class="line mtb "></div>
          <div class="img wh1b06 bg7">
            
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.not-padding{
  padding-left: 25px ;
    padding-right: 25px ;
}
@media screen and (max-width: 960px) {
  .not-padding{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
</style>